import { Outlet, NavLink, useNavigate } from "react-router-dom";
import React, { useState } from "react";
import { Badge, TabBar } from "antd-mobile";
import RouterChildrenList from "../../router/children";
import { Tabbar } from "react-vant";
import "./index.css";
const Index: React.FC = () => {
  const navigate = useNavigate();
  return (
    <div>
      <main>
        <Outlet></Outlet>
      </main>
      <footer>
        <Tabbar border={true}>
          {RouterChildrenList.map((item: any) => {
            return (
              <Tabbar.Item
                icon={item.meate.icon}
                key={item.path}
                onClick={() => navigate(item.path)}
              >
                {item.meate.title}
              </Tabbar.Item>
            );
          })}
        </Tabbar>
      </footer>
    </div>
  );
};

export default Index;
